<template>
  <div class="NewProducts">
    <!-- 填写内容 -->
    <div class="NewProducts_input">
      <van-cell-group>
        <van-field
          v-model="form.proName"
          label="商品名称："
          placeholder="请输入商品名称"
        />
        <van-field
          v-model.number="form.price"
          label="商品原价"
          placeholder="请输入价格"
        />
        <van-field
          v-model="form.content"
          rows="3"
          autosize
          label="商品简介"
          type="textarea"
          maxlength="30"
          placeholder="请输入商品简介"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <!-- 图片 -->
    <div class="NewProducts_img">
      <h3>商品图片</h3>
      <ul>
        <li>
          <van-uploader class="img" :after-read="businessLicense0">
            <img
              style="width: 100%"
              :src="
                form.img[0] == ''
                  ? require('@/assets/mpren1.png')
                  : $base.baseImg + form.img[0]
              "
            />
          </van-uploader>
        </li>
        <li>
          <van-uploader class="img" :after-read="businessLicense1">
            <img
              style="width: 100%"
              :src="
                form.img[1] == ''
                  ? require('@/assets/mpren1.png')
                  : $base.baseImg + form.img[1]
              "
            />
          </van-uploader>
        </li>
        <li>
          <van-uploader class="img" :after-read="businessLicense2">
            <img
              style="width: 100%"
              :src="
                form.img[2] == ''
                  ? require('@/assets/mpren1.png')
                  : $base.baseImg + form.img[2]
              "
            />
          </van-uploader>
        </li>
      </ul>
    </div>
    <!-- 线上线下 -->
    <!-- <div class="NewProducts_img">
      <van-radio-group v-model="form.online" direction="horizontal">
        <van-radio name="1" checked-color="#FF3F1A">线上</van-radio>
        <van-radio name="2" checked-color="#FF3F1A">线下</van-radio>
      </van-radio-group>
    </div> -->
    <!-- 提交按钮 -->
    <div class="button">
      <van-button
        type="primary"
        color="#D2A166"
        @click="createPro"
        round
        block
        size="normal"
        >提交</van-button
      >
      <van-button
        type="default"
        v-if="$route.params.id != '0'"
        @click="delPro"
        round
        block
        size="normal"
        >删除</van-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import {
  Field,
  Button,
  RadioGroup,
  Radio,
  Uploader,
  CellGroup,
  Toast,
} from "vant";

Vue.use(CellGroup);
Vue.use(Uploader);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Field);
@Component({})
export default class NewProducts extends Vue {
  private radio: string = "1";
  private form = {
    online: 0,
    content: "",
    img: ["", "", ""],
    price: 0,
    proName: "",
  };
  private mounted(): void {
    if (this.$route.params.id != "0") {
      this.$common.getAuthToken(this.getData);
    }
  }
  private getData(): void {
    this.$post("proDetails", {
      sku: Number(this.$route.params.id),
    }).then((res: any) => {
      if (res.code == 0) {
        this.form = res.data;
        this.form.price = res.data.price / 100;
      }
    });
  }
  private createPro() {
    if (this.$route.params.id == "0") {
      this.$post("createPro", {
        ...this.form,
        price: this.form.price * 100,
      }).then((res: any) => {
        if (res.code == 0) {
          Toast.success("提交成功等待后台审核");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    } else {
      this.$post("updatePro", {
        ...this.form,
        price: this.form.price * 100,
      }).then((res: any) => {
        if (res.code == 0) {
          Toast.success("提交成功等待后台审核");
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    }
  }
  private businessLicense0(file: any) {
    let formData = new FormData();
    formData.append("img", file.file);
    this.$postFile(`upload`, formData).then((res: any) => {
      if (res.code == 0) {
        this.form.img[0] = res.data.path;
      }
    });
  }
  private businessLicense1(file: any) {
    let formData = new FormData();
    formData.append("img", file.file);
    this.$postFile(`upload`, formData).then((res: any) => {
      if (res.code == 0) {
        this.form.img[1] = res.data.path;
      }
    });
  }
  private businessLicense2(file: any) {
    let formData = new FormData();
    formData.append("img", file.file);
    this.$postFile(`upload`, formData).then((res: any) => {
      if (res.code == 0) {
        this.form.img[2] = res.data.path;
      }
    });
  }
  // 删除商品
  private delPro() {
    this.$post(`delPro`, {
      sku: Number(this.$route.params.id),
    }).then((res: any) => {
      if (res.code == 0) {
        Toast.success(`删除成功！`);
        setTimeout(() => {
          this.$router.back();
        });
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.NewProducts {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  .NewProducts_input {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    margin-bottom: 30px;
  }
  .NewProducts_img {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    margin-bottom: 30px;
    padding: 30px;
    box-sizing: border-box;
    h3 {
      font-size: 30px;
      font-weight: 300;
      color: #000000;
      line-height: 2;
      box-sizing: border-box;
    }
    ul {
      list-style: none;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      li {
        width: 200px;
        height: 200px;
        float: left;
        margin-right: 10px;
        img {
          width: 100%;
          display: block;
        }
      }
    }
  }
  .button {
    margin-top: 100px;
    button {
      margin-bottom: 20px;
    }
  }
}
</style>
